<template>
  <div class="home">
    <home-nav-bar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <home-search-box />
    <home-categories />

    <div class="search-bar" v-if="isShowSearchBar">
      <home-search-bar />
    </div>

    <home-content />
  </div>
</template>

<script setup>
import userHomeStore from '@/stores/modules/home'
import homeNavBar from './cpns/home-nav-bar.vue'
import homeSearchBox from './cpns/home-search-box.vue'
import homeCategories from './cpns/home-categories.vue'
import homeSearchBar from '@/components/search-bar/search-bar.vue'
import homeContent from './cpns/home-content.vue'
import { useScroll, useScroll1 } from '@/hooks/useScroll'
import { computed, ref, watch } from 'vue'

//发送网络请求
const homeStore = userHomeStore()
homeStore.fetchHotSuggestsData()
homeStore.fetchCategoriesData()
homeStore.fetchHomelistData()

// 监听window窗口滚动事件
// 方法一：回调函数
// useScroll1(() => {
//   homeStore.fetchHomelistData()
// })
// 方法二：监听store
const { isReachBottom, scrollTop } = useScroll()
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.fetchHomelistData().then(() => {
      isReachBottom.value = false
    })
  }
})

// 监听滚动
// 方案一：watch监听
// const isShowSearchBar = ref(false)
// watch(scrollTop, (newValue) => {
//   isShowSearchBar.value = newValue > 100
// })
// 方案二：计算属性 - 定义的可响应式数据，依赖另外一个可响应式的数据
const isShowSearchBar = computed(() => {
  return scrollTop.value > 360
})
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 60px;
}
.banner {
  img {
    width: 100%;
  }
}
.search-bar {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
}
</style>
